<template>
  <div>
      我是首页
      <div @click="fn1">文章1</div>
      <div @click="fn2">文章2 -- params传参</div>
      <div>文章3</div>
      <div>文章4</div>

      <button @click="fn3">去播放页</button>
  </div>
</template>

<script>
export default {
    methods: {
        fn1 () {

            // 跳转时如果要携带参数，那么就要写完整写法
            // this.$router.push('/detail')

            // 路由跳转加r
            // 获取参数不加r
            // this.$router.push({
            //     path: '/detail', // 说明要跳转到哪个路径
            //     // query就是传递参数的地方
            //     query: {
            //         // 参数名是id，参数值是1002
            //         id: 1002,
            //         title: 'news1'
            //     }
            // })

            // query方式传参，也可以用name进行跳转
            // 如果跳转时需要携带参数
            // 那么建议都用name进行跳转
            // 因为name既支持query方式传参，也支持params方式传参
            this.$router.push({
                name: 'detail',
                // query就是传递参数的地方
                query: {
                    // 参数名是id，参数值是1002
                    id: 1002,
                    title: 'news1'
                }
            })

            // this.$router.push('/detail?id=1110&title=news33')
        },

        fn2 () {

            // query传query取
            // params传params取
            // params传参时不能用path进行跳转，否则拿不到参数
            // 这时候要通过name进行跳转
            // this.$router.push({
            //     path: '/detail',
            //     params: {
            //         id: 1040,
            //         title: '新闻3'
            //     }
            // })
            this.$router.push({
                // 跳转到名字叫detail的路由
                name: 'detail',
                // 并用params携带参数
                params: {
                    id: 1040,
                    title: '新闻3'
                }
            })
        },

        fn3 () {
            this.$router.push('/play/' + 110)
        }
    }
}
</script>

<style>

</style>